<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item prop="username">
                <!-- v-model是双向绑定，这里绑定的是用户数据 -->
                <el-input placeholder="请输入用户名"
                          v-model="ruleForm.username">
                    <i slot="prefix" class="el-icon-user"></i>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <!-- v-model是双向绑定，这里绑定的是密码数据 -->
                <el-input placeholder="请输入密码"
                          v-model="ruleForm.password"
                          show-password>
                    <i slot="prefix" class="el-icon-lock"></i>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                        @click="login"
                        type="primary"
                        style="width: 100%">登录
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "AccountLogin",
        props: {
            ruleForm: {
                type: Object,
                require: true
            },
            rules: {
                type: Object,
                require: true
            }
        },
        methods: {
            login() {
                // 登录前会先验证数据是否符合规则
                this.$refs.ruleForm.validate((valid) => {
                    // 验证成功事件
                    if (valid) {
                        this.$emit("submit")
                    } else { // 验证失败事件
                        this.$emit("errHandle")
                    }
                })
            }
        }
    };
</script>
